<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>图标兼容性测试</title>
    <style>
        body {
            font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
            margin: 0;
            padding: 20px;
            background-color: #f5f5f5;
        }
        
        .container {
            max-width: 1200px;
            margin: 0 auto;
            background: white;
            border-radius: 8px;
            padding: 24px;
            box-shadow: 0 2px 8px rgba(0,0,0,0.1);
        }
        
        .header {
            text-align: center;
            margin-bottom: 32px;
        }
        
        .header h1 {
            color: #1890ff;
            margin-bottom: 8px;
        }
        
        .header p {
            color: #666;
            margin: 0;
        }
        
        .framework-tabs {
            display: flex;
            margin-bottom: 24px;
            border-bottom: 1px solid #e8e8e8;
        }
        
        .tab-button {
            padding: 12px 24px;
            border: none;
            background: none;
            cursor: pointer;
            font-size: 14px;
            color: #666;
            border-bottom: 2px solid transparent;
            transition: all 0.3s;
        }
        
        .tab-button.active {
            color: #1890ff;
            border-bottom-color: #1890ff;
        }
        
        .tab-button:hover {
            color: #1890ff;
        }
        
        .icon-section {
            margin-bottom: 32px;
        }
        
        .section-title {
            font-size: 18px;
            font-weight: 600;
            margin-bottom: 16px;
            color: #333;
            border-left: 4px solid #1890ff;
            padding-left: 12px;
        }
        
        .icon-grid {
            display: grid;
            grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
            gap: 16px;
        }
        
        .icon-item {
            border: 1px solid #e8e8e8;
            border-radius: 6px;
            padding: 16px;
            transition: all 0.3s;
            background: #fafafa;
        }
        
        .icon-item:hover {
            border-color: #1890ff;
            box-shadow: 0 2px 8px rgba(24, 144, 255, 0.1);
        }
        
        .icon-display {
            display: flex;
            align-items: center;
            margin-bottom: 12px;
        }
        
        .icon-preview {
            width: 32px;
            height: 32px;
            display: flex;
            align-items: center;
            justify-content: center;
            background: #1890ff;
            color: white;
            border-radius: 4px;
            margin-right: 12px;
            font-size: 16px;
        }
        
        .icon-name {
            font-weight: 600;
            color: #333;
        }
        
        .icon-details {
            font-size: 12px;
            color: #666;
            line-height: 1.5;
        }
        
        .icon-code {
            background: #f0f0f0;
            padding: 2px 6px;
            border-radius: 3px;
            font-family: 'Courier New', monospace;
            color: #d63384;
        }
        
        .loading {
            text-align: center;
            padding: 40px;
            color: #666;
        }
        
        .error {
            text-align: center;
            padding: 40px;
            color: #ff4d4f;
        }
        
        .framework-info {
            background: #f6ffed;
            border: 1px solid #b7eb8f;
            border-radius: 6px;
            padding: 16px;
            margin-bottom: 24px;
        }
        
        .framework-info h3 {
            margin: 0 0 8px 0;
            color: #52c41a;
        }
        
        .framework-info p {
            margin: 0;
            color: #666;
            font-size: 14px;
        }
        
        .usage-example {
            background: #f0f0f0;
            border-radius: 4px;
            padding: 12px;
            margin-top: 8px;
            font-family: 'Courier New', monospace;
            font-size: 12px;
            overflow-x: auto;
        }
    </style>
</head>
<body>
    <div class="container">
        <div class="header">
            <h1>图标兼容性测试</h1>
            <p>验证菜单图标在不同UI框架中的显示效果</p>
        </div>
        
        <div class="framework-tabs">
            <button class="tab-button active" data-framework="antd">Ant Design</button>
            <button class="tab-button" data-framework="element">Element UI</button>
            <button class="tab-button" data-framework="elementPlus">Element Plus</button>
            <button class="tab-button" data-framework="fontawesome">Font Awesome</button>
        </div>
        
        <div id="framework-info" class="framework-info">
            <h3>Ant Design</h3>
            <p>React组件库，使用Outlined风格的图标</p>
            <div class="usage-example">
import { SettingOutlined } from '@ant-design/icons';
&lt;SettingOutlined /&gt;
            </div>
        </div>
        
        <div id="loading" class="loading">
            正在加载图标数据...
        </div>
        
        <div id="content" style="display: none;">
            <div class="icon-section">
                <div class="section-title">系统管理图标</div>
                <div id="system-icons" class="icon-grid"></div>
            </div>
            
            <div class="icon-section">
                <div class="section-title">通用菜单图标</div>
                <div id="common-icons" class="icon-grid"></div>
            </div>
        </div>
        
        <div id="error" class="error" style="display: none;">
            加载图标数据失败，请检查后端服务是否正常运行
        </div>
    </div>

    <script>
        let iconData = null;
        let currentFramework = 'antd';
        
        // 框架信息配置
        const frameworkInfo = {
            antd: {
                name: 'Ant Design',
                description: 'React组件库，使用Outlined风格的图标',
                example: `import { SettingOutlined } from '@ant-design/icons';
<SettingOutlined />`
            },
            element: {
                name: 'Element UI',
                description: 'Vue 2组件库，使用el-icon-前缀的图标类名',
                example: `<i class="el-icon-setting"></i>
<el-icon name="setting" />`
            },
            elementPlus: {
                name: 'Element Plus',
                description: 'Vue 3组件库，使用组件形式的图标',
                example: `import { Setting } from '@element-plus/icons-vue';
<Setting />`
            },
            fontawesome: {
                name: 'Font Awesome',
                description: '通用图标字体库，使用fa-前缀的类名',
                example: `<i class="fas fa-cog"></i>
<i class="fas fa-user"></i>`
            }
        };
        
        // Font Awesome图标映射
        const fontAwesomeMapping = {
            'setting': 'fas fa-cog',
            'user': 'fas fa-user',
            'team': 'fas fa-users',
            'safety-certificate': 'fas fa-shield-alt',
            'apartment': 'fas fa-building',
            'user-switch': 'fas fa-user-friends',
            'key': 'fas fa-key',
            'usergroup-add': 'fas fa-user-plus',
            'control': 'fas fa-sliders-h',
            'dashboard': 'fas fa-tachometer-alt',
            'user-circle': 'fas fa-user-circle'
        };
        
        // 初始化
        document.addEventListener('DOMContentLoaded', function() {
            loadIconData();
            initTabEvents();
        });
        
        // 加载图标数据
        async function loadIconData() {
            try {
                const response = await fetch('/icon/test');
                const result = await response.json();
                
                if (result.code === 200) {
                    iconData = result.data;
                    iconData.iconMappings.fontawesome = fontAwesomeMapping;
                    renderIcons();
                    document.getElementById('loading').style.display = 'none';
                    document.getElementById('content').style.display = 'block';
                } else {
                    throw new Error(result.msg);
                }
            } catch (error) {
                console.error('加载图标数据失败:', error);
                document.getElementById('loading').style.display = 'none';
                document.getElementById('error').style.display = 'block';
            }
        }
        
        // 初始化标签页事件
        function initTabEvents() {
            const tabButtons = document.querySelectorAll('.tab-button');
            tabButtons.forEach(button => {
                button.addEventListener('click', function() {
                    // 更新活动标签
                    tabButtons.forEach(btn => btn.classList.remove('active'));
                    this.classList.add('active');
                    
                    // 切换框架
                    currentFramework = this.dataset.framework;
                    updateFrameworkInfo();
                    if (iconData) {
                        renderIcons();
                    }
                });
            });
        }
        
        // 更新框架信息
        function updateFrameworkInfo() {
            const info = frameworkInfo[currentFramework];
            const infoElement = document.getElementById('framework-info');
            
            infoElement.innerHTML = `
                <h3>${info.name}</h3>
                <p>${info.description}</p>
                <div class="usage-example">${info.example}</div>
            `;
        }
        
        // 渲染图标
        function renderIcons() {
            renderIconSection('system-icons', iconData.systemIcons);
            renderIconSection('common-icons', iconData.commonIcons);
        }
        
        // 渲染图标区域
        function renderIconSection(containerId, icons) {
            const container = document.getElementById(containerId);
            const mapping = iconData.iconMappings[currentFramework];
            
            container.innerHTML = icons.map(icon => {
                const mappedIcon = mapping[icon.icon] || icon.icon;
                
                return `
                    <div class="icon-item">
                        <div class="icon-display">
                            <div class="icon-preview">
                                ${getIconPreview(icon.icon)}
                            </div>
                            <div class="icon-name">${icon.name}</div>
                        </div>
                        <div class="icon-details">
                            <div>路径: <span class="icon-code">${icon.path}</span></div>
                            <div>图标名: <span class="icon-code">${icon.icon}</span></div>
                            <div>${currentFramework}: <span class="icon-code">${mappedIcon}</span></div>
                            <div style="margin-top: 8px; color: #999;">${icon.description}</div>
                        </div>
                    </div>
                `;
            }).join('');
        }
        
        // 获取图标预览
        function getIconPreview(iconName) {
            const iconMap = {
                'setting': '⚙️',
                'user': '👤',
                'team': '👥',
                'safety-certificate': '🛡️',
                'apartment': '🏢',
                'user-switch': '🔄',
                'key': '🔑',
                'usergroup-add': '👥+',
                'control': '🎛️',
                'dashboard': '📊',
                'user-circle': '👤'
            };
            
            return iconMap[iconName] || '📄';
        }
    </script>
</body>
</html>